import React, { Component } from 'react';
import { MainBox } from '../style'


class Main extends Component {
    state = {
        /* index0为分类  index1为食材 */
        index:[0,0]
    }
    onLeftClick = index => {
        let topActiveState = this.props.topActiveState
        this.setState(state => { return state.index.splice(topActiveState,1,index) }) 
    }
    render() {
        let { data,topActiveState } = this.props
        let selectIndex = this.state.index[topActiveState]
        return (
            <MainBox>
                {/* 左侧菜单  */}
                <div>
                    <ul>
                        {
                           Object.keys(data).map((item, index) => (
                                <li key={index} onClick={() => this.onLeftClick(index) } className={index === selectIndex?'active' : ''}><span>{item}</span></li>
                            ))
                        }
                    </ul>
                </div>
                {/* 右侧分类 */}
                <div>
                    <ul>
                        {
                            data[Object.keys(data)[selectIndex]] ? 
                            data[Object.keys(data)[selectIndex]].map((item, index) => (
                                <li key={index} ><span>{item}</span></li>
                            ))
                            :
                            <li></li>
                        }
                    </ul>
                </div>
            </MainBox>
        );
    }
}

export default Main;
